<template>
  <div id="app">
    <h1>---------App modules内容---------</h1>
    <h2>{{$store.state.a.name}}</h2>
    <button @click="updateName">修改名字</button>
    <h1>{{$store.getters.fullname}}</h1>
    <h1>{{$store.getters.fullname2}}</h1>
    <button @click="asyncUpdateName">异步修改名字</button>
    <h1>---------------------------------</h1>
    <h1>{{$store.state.info}}</h1>
    <button @click="updateInfo">修改信息</button>
    <h2>{{$store.state.counter}}</h2>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>

    <hello-vuex></hello-vuex>
  </div>
</template>

<script>
  import HelloVuex from './components/HelloVuex.vue'

  export default {
    name: 'App',
    components: {
      HelloVuex
    },
    methods: {
      add() {
        this.$store.commit('increment')
      },
      sub() {
        this.$store.commit('decrement')
      },
      addCount(count) {
        this.$store.commit('incrementCount', count)
      },
      updateInfo() {
        // this.$store.dispatch('aupdateInfo', {
        //   message: '携带信息',
        //   success: () => {
        //     console.log('我完成了');
        //   }
        // })
        this.$store
          .dispatch('aupdateInfo','携带信息')
          .then(res => {
            console.log('里面完成了！');
            console.log(res);
          })
      },
      updateName() {
        this.$store.commit('updateName', 'lisi')
      },
      asyncUpdateName() {
        this.$store.dispatch('aUpdateName')
      }
    }
  }
</script>

<style>

</style>
